import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  HostListener,
  Input,
  Output,
  EventEmitter,
} from '@angular/core';

/**
 * 浮动按钮组组件
 */
@Component({
  selector: 'float-btns',
  templateUrl: './float-btns.component.html',
  styleUrls: ['./float-btns.component.less'],
  host: {
    '[class.funcbtn]': 'true',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FloatBtnsComponent {
  active = false;
  opt = 0;
  interval$: any;
  interval2$: any;
  @Input()
  title;

  @Input()
  btns = [
    // { remark: '下载当前sku数据', icon: 'icon-download' },
    // { remark: '下载同款数据', icon: 'icon-tongkuan' },
  ];
  @Output()
  itemClick = new EventEmitter();

  constructor(private cdr: ChangeDetectorRef) {}

  ok(idx) {
    if (!this.interval2$) {
      this.itemClick.emit(idx);
      this.interval2$ = setInterval(() => {
        if (!this.btns[idx].loading) {
          this.cdr.detectChanges();
          clearInterval(this.interval2$);
          this.interval2$ = null;
        }
      }, 200);
    }
  }

  _click() {
    this.active = !this.active;
    if (this.active) {
      this.opt = 0;
      this.interval$ = setInterval(() => {
        this.opt++;
        this.cdr.detectChanges();
        if (this.opt === 5) {
          if (this.interval$) {
            clearInterval(this.interval$);
          }
        }
      }, 100);
    } else {
      this.opt = 0;
      if (this.interval$) {
        clearInterval(this.interval$);
      }
    }
  }
}
